<template>
  <a-card :bordered='false'>
    <!-- 查询区域 -->
    <div class='table-page-search-wrapper'>
      <a-form layout='inline' @keyup.enter.native='searchQuery'>
        <a-row :gutter='24'>
          <a-col :xl='6' :lg='7' :md='8' :sm='24'>
            <a-form-item label='款号'>
              <a-input placeholder="请输入款号" v-model="queryParam.codeNum"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="款类">
              <j-dict-select-tag placeholder="请选择款类" v-model="queryParam.styleCate" dictCode="style_type"/>
            </a-form-item>
          </a-col>
          <a-col :xl='6' :lg='7' :md='8' :sm='24'>
            <a-form-item label='款式名称'>
              <a-input placeholder='请输入款式名称' v-model='queryParam.name'></a-input>
            </a-form-item>
          </a-col>
          <template v-if='toggleSearchStatus'>
            <a-col :xl='6' :lg='7' :md='8' :sm='24'>
              <a-form-item label='胶膜号'>
                <a-input placeholder='请输入胶膜号' v-model='queryParam.modelNum'></a-input>
              </a-form-item>
            </a-col>
          </template>

          <a-col :xl='6' :lg='7' :md='8' :sm='24'>
            <span style='float: left;overflow: hidden;' class='table-page-search-submitButtons'>
              <a-button type='primary' @click='searchQuery' icon='search'>查询</a-button>
              <a-button type='primary' @click='searchReset' icon='reload' style='margin-left: 8px'>重置</a-button>
              <a @click='handleToggleSearch' style='margin-left: 8px'>
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
              </a>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class='table-operator'>
      <a-button @click='handleAdd' type='primary' icon='plus'>新增</a-button>
      <a-button type='primary' icon='download' @click="handleExportXls('款式资料')">EXCEL导出</a-button>
      <!--<a-upload name='file' :showUploadList='false' :multiple='false' :headers='tokenHeader' :action='importExcelUrl'
                @change='handleImportExcel'>
        <a-button type='primary' icon='import'>导入</a-button>
      </a-upload>-->
      <a-button @click="handleImportXls" type="primary" icon="upload">EXCEL导入</a-button>
      <a-button @click="handleUploadPic" type="primary" icon="upload">上传款式图片</a-button>
      <style-info-import-modal ref="importXlsModal" :url="getImportUrl()" :multi="false" :verifyCodeNum="true"  @ok="importOk"></style-info-import-modal>
      <style-info-upload-pic-modal ref="uploadPicModal" :url="getUploadPicDirUrl()" @ok="importOk"></style-info-upload-pic-modal>

      <!-- 高级查询区域
      <j-super-query :fieldList='superFieldList' ref='superQueryModal'
                     @handleSuperQuery='handleSuperQuery'></j-super-query> -->
    </div>

    <!-- table区域-begin -->
    <div>
      <div class='ant-alert ant-alert-info' style='margin-bottom: 16px;'>
        <i class='anticon anticon-info-circle ant-alert-icon'></i> 已选择 <a
        style='font-weight: 600'>{{ selectedRowKeys.length }}</a>项
        <a style='margin-left: 24px' @click='onClearSelected'>清空</a>
        <a style=' margin-right: 30px; float: right; ' @click='changeView(1)'>
          <a-icon type='bars' />
        </a>
        <a style=' margin-right: 10px; float: right; ' @click='changeView(2)'>
          <a-icon type='appstore' />
        </a>
      </div>

      <div class='card-list' ref='content' v-show='isGridShow'>
        <a-list
          id='grid_list'
          rowKey='id'
          :grid='{gutter: 24, lg: 4, md: 2, sm: 1, xs: 1}'
          :dataSource='dataSource'
          :pagination='ipagination'
          :loading='loading'
          :scroll='{x:true}'
          class='j-table-force-nowrap'
          :columns='columns'
        >
          <a-list-item slot='renderItem' slot-scope='item, index'>
            <template>
              <a-card :hoverable='true' @click='cardClickThenSelect(item)'
                      :style='item.id===selectedId ? selectedStyle : defaultStyle'>
                <a-card-meta>
                  <div style='margin-bottom: 3px' slot='title'>{{ item.name }}</div>
                  <a-avatar class='card-avatar' slot='avatar' :src='getThumbnailImgView(item.styleImageString)' size='large' />
                  <div class='meta-content' slot='description'>{{ item.codeNum }}</div>
                  <div class='meta-content' slot='description'>类别：{{ item.styleCate_dictText }}</div>
                  <div class='meta-content' slot='description'>客户：{{ item.customerInfoId_dictText }}</div>
                  <div class='meta-content' slot='description'>连石重：{{ item.withStoneWeight }}</div>
                  <div class='meta-content' slot='description'>石重：{{ item.pureStoneWeight }}</div>
                  <div class='meta-content' slot='description'>净重：{{ item.goldWeight }}</div>
                </a-card-meta>
                <!--记录操作按钮 开始-->

                <template class='ant-card-actions' slot='actions'>
                  <a @click='handleEdit(item)'>修改</a>
                  <a-popconfirm title='确定删除吗?' @confirm='() => handleDelete(item.id)'>
                    <a>删除</a>
                  </a-popconfirm>
                </template>
                <!--记录操作按钮 结束-->
              </a-card>
            </template>
          </a-list-item>
        </a-list>
      </div>

      <a-table
        ref='table'
        size='middle'
        bordered
        rowKey='id'
        class='j-table-force-nowrap'
        :scroll='{x:true}'
        :columns='columns'
        :dataSource='dataSource'
        :pagination='ipagination'
        :loading='loading'
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange, type:'radio'}"
        :customRow='clickThenSelect'
        v-show='isTableShow'
      >
        <span slot="esContent" slot-scope="text">
           <j-ellipsis :value="text" :length="8"/>
        </span>
      <span slot="num" slot-scope="text, record, index">
          {{(ipagination.current-1)*ipagination.pageSize+parseInt(index)+1}}
        </span>
        <template slot='htmlSlot' slot-scope='text'>
          <div v-html='text'></div>
        </template>
        <template slot="picSlot" slot-scope="text, record">
          <span v-for="(item,index) in (text|| '').split(',')">
          <span v-if="item">
            <img :src="getThumbnailImgView(item)" :large="getImgView(item)" :preview="index" height="30px" alt="" style="cursor:pointer;max-width:80px;font-size: 12px;font-style: italic;">
            <a-divider type="vertical" v-if="index<(text.split(',').length-1)" />
          </span>
          <span v-else style="font-size: 12px;font-style: italic;">无图片</span>
          </span>
      </template>
        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>
        <template slot="imgSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
          <img v-else :src="getImgView(text)" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
        </template>
        <template slot='fileSlot' slot-scope='text'>
          <span v-if='!text' style='font-size: 12px;font-style: italic;'>无文件</span>
          <a-button
            v-else
            :ghost='true'
            type='primary'
            icon='download'
            size='small'
            @click='downloadFile(text)'>
            下载
          </a-button>
        </template>
        <span slot='action' slot-scope='text, record'>
          <a @click='handleEdit(record)'>编辑</a>
          <a-divider type='vertical' />
          <a-dropdown>
            <a class='ant-dropdown-link'>更多 <a-icon type='down' /></a>
            <a-menu slot='overlay'>
              <a-menu-item>
                <a-popconfirm title='确定删除吗?' @confirm='() => handleDelete(record.id)'>
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
      </a-table>
    </div>

    <a-tabs defaultActiveKey='1'>
      <a-tab-pane tab='配石资料' key='1'>
        <StyleStoneInfoList :mainId='selectedMainId' />
      </a-tab-pane>
      <a-tab-pane tab='配件资料' key='2' forceRender>
        <StyleAccessoryInfoList :mainId='selectedMainId' />
      </a-tab-pane>
      <a-tab-pane tab='工序资料' key='3' forceRender>
        <StyleWorkingProcedureList :mainId='selectedMainId' />
      </a-tab-pane>
      <a-tab-pane tab='电镀资料' key='4' forceRender>
        <StyleElectroplateInfoList :mainId='selectedMainId' />
      </a-tab-pane>
      <a-tab-pane tab='套件资料' key='5' forceRender>
        <StyleSuitInfoList :mainId='selectedMainId' />
      </a-tab-pane>
      <a-tab-pane tab='其他资料' key='6' forceRender>
        <StyleOtherInfoList :mainId='selectedMainId' />
      </a-tab-pane>
    </a-tabs>

    <styleInfo-modal ref='modalForm' @ok='modalFormOk'></styleInfo-modal>
  </a-card>
</template>

<script>

import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { getAction } from '@/api/manage'
import StyleInfoModal from './modules/StyleInfoModal'
import StyleInfoImportModal from './modules/StyleInfoImportModal'
import StyleInfoUploadPicModal from './modules/StyleInfoUploadPicModal'
import StyleStoneInfoList from './StyleStoneInfoList'
import StyleAccessoryInfoList from './StyleAccessoryInfoList'
import StyleWorkingProcedureList from './StyleWorkingProcedureList'
import StyleElectroplateInfoList from './StyleElectroplateInfoList'
import StyleSuitInfoList from './StyleSuitInfoList'
import StyleOtherInfoList from './StyleOtherInfoList'
import { initDictOptions } from '@/components/dict/JDictSelectUtil'
import '@/assets/less/TableExpand.less'
import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
import Vue from 'vue'
import moment from 'moment'
let option = {
  maxSpreadZoom: 1, // 控制预览图最大的倍数，默认是2倍
  fullscreenEl: false, //控制是否显示右上角全屏按钮
  closeEl: false, //控制是否显示右上角关闭按钮
  tapToClose: true, //点击滑动区域应关闭图库
  shareEl: false, //控制是否显示分享按钮
  zoomEl: false, //控制是否显示放大缩小按钮
  counterEl: false, //控制是否显示左上角图片数量按钮
  arrowEl: true,  //控制如图的左右箭头（pc浏览器模拟手机时）
  tapToToggleControls: true, //点击应切换控件的可见性
  clickToCloseNonZoomable: true //点击图片应关闭图库，仅当图像小于视口的大小时
}
Vue.use(preview, option)

export default {
  name: 'StyleInfoList',
  mixins: [JeecgListMixin],
  components: {
    StyleStoneInfoList,
    StyleAccessoryInfoList,
    StyleWorkingProcedureList,
    StyleElectroplateInfoList,
    StyleSuitInfoList,
    StyleOtherInfoList,
    StyleInfoModal,StyleInfoImportModal,StyleInfoUploadPicModal
  },
  data() {
    return {
      disableMixinCreated: false,//执行jeecg默认的created事件
      previewVisable: false,
      description: '款式资料管理页面',
      isGridShow: true, //展示网格
      isTableShow: false, //展示列表
      defaultStyle: {},
      selectedStyle: { 'color': '#0785fd', 'font-weight': 'bold', 'border-color': '#00DB00' },
      selectedId: 0,
      // 表头
      columns: [
        {
          title: '款图',
          align: 'center',
          dataIndex: 'styleImageString',
          scopedSlots: {customRender: 'picSlot'}
        },
        {
          title:'款号',
          align:"center",
          dataIndex: 'codeNum'
        },
        {
          title:'款类',
          align:"center",
          dataIndex: 'styleCate_dictText'
        },
        {
          title:'所属客户',
          align:"center",
          dataIndex: 'customerInfoId_dictText'
        },
        {
          title:'款式名称',
          align:"center",
          dataIndex: 'name'
        },
        {
          title: '电镀费',
          dataIndex: 'electroplateCost',
          align: "center",
          sorter: true
        },{
          title: '净金重',
          dataIndex: 'goldWeight',
          align: "center",
          sorter: true
        },{
          title: '净银重',
          dataIndex: 'silverModelWeight',
          align: "center",
          sorter: true
        },{
          title: '蜡重',
          dataIndex: 'waxModelWeight',
          align: "center",
          sorter: true
        },{
          title: '石重',
          dataIndex: 'pureStoneWeight',
          align: "center",
          sorter: true
        },{
          title: '连石重',
          dataIndex: 'withStoneWeight',
          align: "center",
          sorter: true
        },{
          title: '单价',
          dataIndex: 'unitPrice',
          align: "center",
          sorter: true
        },{
          title: '单价(含税)',
          dataIndex: 'unitPriceTax',
          align: "center",
          sorter: true
        },{
          title: '耗率(%)',
          dataIndex: 'attritionRate',
          align: "center",
          sorter: true
        },{
          title: '手寸规格',
          dataIndex: 'styleSize',
          align: "center",
          scopedSlots: {customRender: 'esContent'}
        },{
          title: '手寸规格单位',
          dataIndex: 'styleSizeUnitName',
          align: "center",
        },{
          title: '长度',
          dataIndex: 'length',
          align: "center",
        },{
          title: '宽度',
          dataIndex: 'width',
          align: "center",
        },{
          title: '胶膜号',
          dataIndex: 'modelNum',
          align: "center",
        },{
          title: '难度级别',
          dataIndex: 'difficultLevel',
          align: "center",
          sorter: true
        },{
          title: '款式系列',
          dataIndex: 'styleSeries',
          align: "center",
        },{
          title: '生产要求',
          dataIndex: 'productionRequirement',
          align: "center",
          scopedSlots: {customRender: 'esContent'}
        },
        {
          title:'电镀要求',
          align:"center",
          dataIndex: 'electroplateRequirement',
          scopedSlots: {customRender: 'esContent'}
        },
        /**{
          title: '起版要求',
          dataIndex: 'platemakingRequirement',
          align: "center",
          scopedSlots: {customRender: 'esContent'}
        },
         {
          title:'烤漆要求',
          align:"center",
          dataIndex: 'paintRequirement',
          scopedSlots: {customRender: 'esContent'}
        },
         {
          title:'包装要求',
          align:"center",
          dataIndex: 'packRequirement',
          scopedSlots: {customRender: 'esContent'}
        },*/
        {
            title:'创建时间',
            align:"center",
            dataIndex: 'createTime',
            customRender: (text) => {
              return moment(text).format('YYYY-MM-DD')
            }
          },
        {
          title: '操作',
          dataIndex: 'action',
          align:"center",
          fixed:"right",
          width:147,
          scopedSlots: { customRender: 'action' },
        }
      ],
      url: {
        list: '/styleInfo/styleInfo/list',
        delete: '/styleInfo/styleInfo/delete',
        deleteBatch: '/styleInfo/styleInfo/deleteBatch',
        exportXlsUrl: '/styleInfo/styleInfo/exportXls',
        importExcelUrl: '/styleInfo/styleInfo/importExcel',
        uploadPicDirUrl: '/styleInfo/styleInfo/uploadPicDirUrl'
      },
      dictOptions: {
        styleCate: [],
        customer: []
      },
      selectedMainId: '',
      superFieldList: []
    }
  },
  mounted () {
    this.$previewRefresh()
    this.$preview.on('close', () => {
      this.isShow = false
    })
  },
  created() {
    this.getSuperFieldList()
  },
  computed: {
    importExcelUrl: function() {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    }
  },
  methods: {
    handleCancel(id) {
      this.$refs[id].previewVisible = false;
    },
    handlePreview(id) {
      this.$refs[id].previewVisible = true;
    },
    handleImportXls(){
      this.$refs.importXlsModal.show()
    },
    handleUploadPic(){
      this.$refs.uploadPicModal.show()
    },
    getImportUrl(){
      return this.url.importExcelUrl
    },
    getUploadPicDirUrl(){
      return this.url.uploadPicDirUrl
    },
    importOk(){
      this.loadData(1)
    },
    changeView(tag) {
      if (tag === 1)   //展示列表
      {
        this.isTableShow = true
        this.isGridShow = false
      } else if (tag === 2) { //展示网格
        this.isTableShow = false
        this.isGridShow = true
      }
    },
    cardClickThenSelect(record) {
      this.onSelectChange(record.id.split(','), [record])
      this.selectedId = record.id
    },
    initDictConfig() {
      initDictOptions('style_type').then((res) => {
        if (res.success) {
          this.$set(this.dictOptions, 'styleCate', res.result)
        }
      })
      initDictOptions('customer_info,cus_name,cus_name').then((res) => {
        if (res.success) {
          this.$set(this.dictOptions, 'customer', res.result)
        }
      })
    },
    clickThenSelect(record) {
      return {
        on: {
          click: () => {
            this.onSelectChange(record.id.split(','), [record])
          }
        }
      }
    },
    onClearSelected() {
      this.selectedRowKeys = []
      this.selectionRows = []
      this.selectedMainId = ''
    },
    onSelectChange(selectedRowKeys, selectionRows) {
      this.selectedMainId = selectedRowKeys[0]
      this.selectedRowKeys = selectedRowKeys
      this.selectionRows = selectionRows
    },
    loadData(arg) {
      if (!this.url.list) {
        this.$message.error('请设置url.list属性!')
        return
      }
      //加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1
      }
      this.onClearSelected()
      var params = this.getQueryParams()//查询条件
      this.loading = true
      getAction(this.url.list, params).then((res) => {
        if (res.success) {
          this.dataSource = res.result.records
          this.ipagination.total = res.result.total
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
        this.loading = false
      })
    },
    getSuperFieldList() {
      let fieldList = []
      fieldList.push({ type: 'Blob', value: 'styleImage', text: '款式图片', dictCode: '' })
      fieldList.push({ type: 'string', value: 'codeNum', text: '款式编码', dictCode: '' })
      fieldList.push({ type: 'string', value: 'styleCate', text: '款式分类', dictCode: 'style_type' })
      fieldList.push({ type: 'string', value: 'name', text: '名称', dictCode: '' })
      fieldList.push({ type: 'string', value: 'modelNum', text: '胶膜号', dictCode: '' })
      fieldList.push({ type: 'string', value: 'customer', text: '所属客户', dictCode: 'customer_info,cus_name,cus_name' })
      fieldList.push({ type: 'double', value: 'goldWeight', text: '头版金重', dictCode: '' })
      fieldList.push({ type: 'double', value: 'attritionRate', text: '耗率', dictCode: '' })
      fieldList.push({ type: 'double', value: 'labourCost', text: '工费', dictCode: '' })
      fieldList.push({ type: 'string', value: 'styleSize', text: '规格/手寸', dictCode: '' })
      fieldList.push({ type: 'double', value: 'length', text: '长度', dictCode: '' })
      fieldList.push({ type: 'double', value: 'width', text: '宽度', dictCode: '' })
      fieldList.push({ type: 'double', value: 'silverModelWeight', text: '银版重', dictCode: '' })
      fieldList.push({ type: 'double', value: 'waxModelWeight', text: '蜡版重', dictCode: '' })
      fieldList.push({ type: 'string', value: 'difficultLevel', text: '难度级别', dictCode: '' })
      fieldList.push({ type: 'double', value: 'unitPrice', text: '单价', dictCode: '' })
      fieldList.push({ type: 'string', value: 'styleSeries', text: '款式系列', dictCode: '' })
      fieldList.push({ type: 'string', value: 'productionRequirement', text: '生产要求', dictCode: '' })
      fieldList.push({ type: 'string', value: 'platemakingRequirement', text: '起版要求', dictCode: '' })
      fieldList.push({ type: 'string', value: 'codeNumKey', text: '编码标签', dictCode: '' })
      this.superFieldList = fieldList
    }
  }
}
</script>
<style lang='less' scoped>
@import '~@assets/less/common.less';

.card-avatar {
  width: 148px;
  height: 148px;
  border-radius: 18px;
}

.ant-card-actions {
  background: #f7f9fa;

  li {
    float: left;
    text-align: center;
    margin: 12px 0;
    color: rgba(0, 0, 0, 0.45);
    width: 50%;

    &:not(:last-child) {
      border-right: 1px solid #e8e8e8;
    }

    a {
      color: rgba(0, 0, 0, .45);
      line-height: 22px;
      display: inline-block;
      width: 100%;

      &:hover {
        color: #1890ff;
      }
    }
  }
}

.new-btn {
  background-color: #fff;
  border-radius: 2px;
  width: 100%;
  height: 186px;
}

.meta-content {
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  height: 24px;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
</style>